<template>
	<view class="login_wrap">
		<!-- logo盒子 -->
		<view class="logo_box">
			<!-- <image src="./images/logo.png" class="logo_img" mode=""></image> -->
		</view>
		<!-- 手机号一键登录盒子 -->
		<view class="phone_login_box">

			<wd-button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" custom-class="phone_login_btn"
				size="large" style="width: 200px;">
				<text class="phone_login_text">手机号一键登录/注册</text>
			</wd-button>
		</view>

		<!-- 暂不登录盒子 -->
		<view class="not_login_box">
			<text class="text" @click="notLoginClick">暂不登录</text>
		</view>

		<!-- <wd-button type="primary" @click="getLocation">获取位置</wd-button>
		
		
		<wd-button type="primary" @click="navigationLocation">导航位置</wd-button> -->
		

		<TechnicalSupport></TechnicalSupport>
	</view>
</template>

<script>
	import {
		defineComponent,
		ref,
		onMounted
	} from 'vue'
	export default defineComponent({
		name: 'Login',
	})
</script>
<script setup>
	import TechnicalSupport from '@/components/technicalSupport.vue'
	import {
		useUserStore
	} from '@/stores/user.js'
	import {
		getOpenIdApi
	} from '@/api/user.js'

	const userStore = useUserStore()

	let phone = '13093291267'
	
	const getLocation = () =>{
		uni.chooseLocation({
			success: (res) => {
				console.log(res);
			}
		})
	}

	const navigationLocation = () => {
		uni.getLocation({
			type: 'gcj02',
			success: (res) => {
				console.log(res);
				let key = "28ab7a162ee8eda5c34858280f9863f4";
				let address = ''
				let lat = res.latitude
				let lng = res.longitude
				uni.request({
					url: `https://restapi.amap.com/v3/geocode/regeo?output=json&location=${res.longitude},${res.latitude}&key=${key}&radius=1000&extensions=all`,
					success: (res) => {
						console.log('高德地图API接口返回信息', res)
						console.log("省：" + res.data.regeocode.addressComponent.province);
						address = res.data.regeocode.formatted_address
						uni.openLocation({
							latitude:lat,
							longitude:lng,
						    address:address,
							name:"公司名称"
						})
					},
					fail: (error) => {
						uni.showToast({
							title: "获取位置信息失败",
							icon: "none"
						});
					}
				})
				
			},
			fail: (err) => {
				console.log(err);
			}
		})
	}

	const onGetPhoneNumber = (e) => {
		// userStore.registerInfo
		console.log(e);
		uni.navigateTo({
			url: "/pages/register/register"
		})

		// if(e.errMsg=="getPhoneNumber:fail no permission"){
		// 	uni.showToast({
		// 		title:"小程序未认证",
		// 		icon:"error",
		// 		mask:true,
		// 		duration:1000
		// 	})
		// }
	}



	const notLoginClick = () => {
		uni.navigateBack()

	}

	onMounted(() => {

		userStore.registerInfo.userProfilePicture = ""
		userStore.registerInfo.userNearName = ""
	})
</script>

<style lang="scss" scoped>
	.login_wrap {
		width: 100vw;
		height: 100vh;
		position: relative;
		background: linear-gradient(180deg, rgba(55, 168, 255, 0.3) 0%, rgba(187, 255, 251, 0.2) 100%);

		.logo_box {
			.logo_img {
				width: 66px;
				height: 60px;
			}
		}

		// 手机号登录
		.phone_login_box {
			position: absolute;
			top: 60%;
			left: 50%;
			transform: translate(-50%, -50%);


			.phone_login_btn {

				.phone_login_text {
					height: 40px;
					line-height: 40px;
					letter-spacing: 2px;
					font-weight: bold;
					// color: red;
					display: inline-block;
					width: 240px;
					position: relative;
					left: 4px;
				}
			}
		}

		// 暂不登录
		.not_login_box {
			position: absolute;
			top: 74%;
			left: 50%;
			transform: translate(-50%, -50%);

			.text {
				color: #515151;
				font-size: 12px;
				letter-spacing: 1px;
				// border: 1px solid red;
				padding: 5px 12px;
				border-radius: 16px;
				background-color: rgba(0, 0, 0, 0.04);
			}
		}
	}


	.wd-button {
		padding: 20px 10px !important;
	}
</style>